<template>
  <div>
    <van-nav-bar
      title="历史赔率"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="navbar"
    />
    <van-row type="flex" class="historyTitle">
      <van-col span="9">区间</van-col>
      <van-col span="5">赔率</van-col>
      <van-col span="5">开始价格</van-col>
      <van-col span="5">开奖结果</van-col>
    </van-row>
    <van-list v-model="loading" :error.sync="error" error-text="请求失败，点击重新加载" @load="onLoad">
    <van-row type="flex" v-for="(odds, index) in oddsList" :key="index" class="histordDetail">
        <van-col span="9">
          {{odds.period.period_code.substring(5, 10)}}{{odds.period.period_code.substring(10)}}
        </van-col>
      <van-col span="5">
        <div v-if="odds.odds_bull == null && odds.odds_bear == null">
          0.00/0.00
        </div><div v-else>
          {{odds.odds_bull.toFixed(2)}}/{{odds.odds_bear.toFixed(2)}}
      </div>
      </van-col>
        <van-col span="5">{{odds.start_price}}</van-col>
        <van-col span="5">
          <span v-if="odds.start_price < odds.end_price" style="color: green;">
              {{odds.end_price}}
            </span>
          <span v-else style="color: red;">
              {{odds.end_price}}
            </span>
        </van-col>
    </van-row>
    </van-list>
  </div>
</template>

<script>
import { Toast, NavBar, List, Row, Col } from 'vant'
export default {
  name: 'betTable',
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      betId: null,
      oddsTitleList: ['区间', '赔率', '开始价格', '开奖结果'],
      oddsList: [],
      error: false,
      loading: false,
      finished: false,
      page: 1
    }
  },
  async mounted () {
    this.betId = this.$route.params.id
  },
  computed: {
    oddsOddsBull (odds) {
      if (this.oddsList !== null && this.oddsList.length !== 0) {
        if (odds.odds_bull !== null) {
          return this.order.odds.odds_bull.toFixed(2)
        } else return ''
      } else return ''
    },
    oddsOddsBear (odds) {
      if (this.oddsList !== null && this.oddsList.length !== 0) {
        if (odds.odds_bear !== null) {
          return odds.odds_bear.toFixed(2)
        } else return ''
      } else return ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    async getOdds (id, page) {
      const { data } = await this.$api.bet.oddsList({ bet_id: id, page: page })
      console.log(data)
      if (data.code === 200) {
        return data.data
      } else {
        Toast('获取数据失败，请刷新')
      }
    },
    async onLoad () {
      console.log('page=' + this.page)
      let data = await this.getOdds(this.betId, this.page)
      this.loading = false
      if (this.page > 1) {
        this.oddsList = [...this.oddsList, ...data.data]
      } else {
        this.oddsList = data.data
      }
      // 如果当前页数 = 总页数，则已经没有数据
      if (data.total_pages <= this.pageClose) {
        this.finished = true
      }
      this.page = this.page + 1
    }
  }
}
</script>

<style scoped lang="less">
  .historyTitle{
    padding: 10px 0px;
    /*padding-left: 10px;*/
    border-bottom: solid 1px #E1E4EB;
    border-top: solid 1px #E1E4EB;
    .van-col{ text-align: center }
  }
  .histordDetail{
    padding: 15px 0px;
    border-bottom: solid 1px #E1E4EB;
    .van-col{
      text-align: center;
    }
  }
  *{
    font-size: 14px;
  }
</style>
